<template>
    <div>
        <h-collapse>
            <template #title>
                <flexbox class="title">
                    <span>需求能效</span>
                    <img class="margin-l-8" src="@/assets/images/chart/tooltip.png" @click.stop="handleShowTipModal" />
                </flexbox>
            </template>
            <div class="card hover-shadow">
                <div class="card-cont">
                    <!-- 上部 -->
                    <a-row>
                        <a-col :span="18">
                            <flexbox class="board-cont">
                                <div class="left hover-shadow">
                                    <div style="font-size: 16px">需求统计看板</div>
                                    <div style="margin-top: 32px">
                                        <a-row>
                                            <a-col :span="8">
                                                <div style="font-size: 14px; color: #f8f8f9">新增业务需求</div>
                                                <div style="font-size: 32px">{{ detail.businessCount }}</div>
                                            </a-col>
                                            <a-col :span="8">
                                                <div style="font-size: 14px; color: #f8f8f9">上线产品需求</div>
                                                <div style="font-size: 32px">{{ detail.productCount }}</div>
                                            </a-col>
                                            <a-col :span="8">
                                                <div style="font-size: 14px; color: #f8f8f9">上线预发布版本</div>
                                                <div style="font-size: 32px">{{ detail.versionCount }}</div>
                                            </a-col>
                                        </a-row>
                                    </div>
                                </div>
                                <a-row class="right">
                                    <a-col :span="10" class="item hover-shadow" v-for="(item, index) of cardList" :key="index">
                                        <flexbox align="flex-start">
                                            <div style="margin: 6px 6px 0 0"><img :src="item.imgSrc" /></div>
                                            <div>
                                                <div class="font-w-b">
                                                    <span style="font-size: 28px; margin-right: 1px">{{ item.day }}</span>
                                                    天
                                                </div>
                                                <span style="margin-left: 3px; font-size: 12px; color: #8590a5">{{ item.title }}</span>
                                            </div>
                                        </flexbox>
                                        <div class="trangle" v-if="item.isWarning"></div>
                                        <a-tooltip v-if="item.isWarning">
                                            <template #title>
                                                <div>该数据远小于参考值，可能存在下列录入不规范情形:</div>
                                                <div>1.需求提出日期不准确</div>
                                                <div>
                                                    <span>2.当前查询时间段内没有已发布版本数据，无法获取需求上线时间</span>
                                                    <router-link :to="{ path: '/energyManage/requireTrack', query: { systemId: detail.systemId } }"> 查看详情</router-link>
                                                </div>
                                            </template>
                                            <img src="@/assets/images/chart/warning.png" class="warning-img" v-if="item.isWarning" />
                                        </a-tooltip>
                                    </a-col>
                                </a-row>
                            </flexbox>
                            <h-section title="每日新增需求量" style="padding: 0">
                                <h-line-chart :option="lineOption" height="250px" />
                            </h-section>
                        </a-col>

                        <a-col :span="6">
                            <div class="font-w-b">阶段平均耗时</div>
                            <div style="margin-top: 64px">
                                <flexbox justify="space-between" class="font-s-base" style="margin-bottom: 6px">
                                    <span style="color: #505a6e">需求受理平均耗时（天）</span>
                                    <span style="color: #17233d; font-weight: bold">{{ $filters.daysToDHMFilter(detail.acceptAvgDays) }}</span>
                                </flexbox>
                                <a-progress :strokeWidth="16" :showInfo="false" :percent="detail.acceptAvgDaysPercent" strokeColor="#26AAD9" />
                            </div>
                            <div style="margin-top: 70px">
                                <flexbox justify="space-between" class="font-s-base" style="margin-bottom: 6px">
                                    <span style="color: #505a6e">需求初审平均耗时（天）</span>
                                    <span style="color: #17233d; font-weight: bold">{{ $filters.daysToDHMFilter(detail.firstReviewAvgDays) }}</span>
                                </flexbox>
                                <a-progress :strokeWidth="16" :showInfo="false" :percent="detail.firstReviewAvgDaysPercent" strokeColor="#26AAD9" />
                            </div>
                            <div style="margin-top: 70px">
                                <flexbox justify="space-between" class="font-s-base" style="margin-bottom: 6px">
                                    <span style="color: #505a6e">研发评审平均耗时（天）</span>
                                    <span style="color: #17233d; font-weight: bold">{{ $filters.daysToDHMFilter(detail.randdReviewAvgDays) }}</span>
                                </flexbox>
                                <a-progress :strokeWidth="16" :showInfo="false" :percent="detail.randdReviewAvgDaysPercent" strokeColor="#F7762A" />
                            </div>
                        </a-col>
                    </a-row>
                </div>
            </div>
        </h-collapse>
    </div>
</template>

<script lang="ts">
import { HLineChart } from '@/components';
import HCollapse from './HCollapse.vue';
import { defineComponent, ref, unref, reactive, toRefs, watch, getCurrentInstance } from 'vue';
export default defineComponent({
    components: {
        HCollapse,
        HLineChart
    },
    props: {
        detail: {
            type: Object,
            default: () => ({})
        },
        riskData: {
            type: Object,
            default: () => ({})
        },
        form: {
            type: Object,
            default: () => ({})
        }
    },
    emits: ['handleShowTipModal'],
    setup(props, { emit }) {
        const instance: any = getCurrentInstance();
        const state = reactive<any>({
            lineOption: {},
            cardList: [
                { imgSrc: require('@/assets/images/chart/1.png'), title: '需求转化耗时', key: 'convertAvgDays', day: 0, isWarning: false },
                { imgSrc: require('@/assets/images/chart/2.png'), title: '开发平均周期', key: 'devAvgDays', day: 0, isWarning: false },
                { imgSrc: require('@/assets/images/chart/3.png'), title: '测试平均周期', key: 'testAvgDays', day: 0, isWarning: false },
                { imgSrc: require('@/assets/images/chart/4.png'), title: '上线平均周期', key: 'onlineAvgDays', day: 0, isWarning: false }
            ]
        });
        const handleShowTipModal = () => {
            emit('handleShowTipModal', 1);
        };
        const initData = () => {
            state.cardList.forEach((item, i) => {
                state.cardList[i].day = props.detail[item.key];
                if (item.key === 'convertAvgDays') {
                    // state.cardList[i].isWarning = state.cardList[i].day > props.riskData.convertAvgOffset;
                    state.cardList[i].isWarning = false;
                }
                if (item.key === 'devAvgDays') {
                    state.cardList[i].isWarning = state.cardList[i].day < props.riskData.devAvgOffset - 5;
                }
                if (item.key === 'testAvgDays') {
                    // state.cardList[i].isWarning = state.cardList[i].day < props.riskData.testAvgOffset;
                    state.cardList[i].isWarning = false;
                }
                if (item.key === 'onlineAvgDays') {
                    state.cardList[i].isWarning = state.cardList[i].day < props.riskData.onlineAvgOffset - 5;
                }
            });
            setTimeout(() => {
                const datesArr = Object.keys(props.detail.dayBusinessMap).sort();
                const valArr = datesArr.map((item) => props.detail.dayBusinessMap[item]);
                if (datesArr.length && valArr.length) {
                    state.lineOption = {
                        legend: {
                            x: 'center',
                            y: 'bottom',
                            data: ['每日新增需求量']
                        },
                        xArr: [...datesArr],
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                name: '每日新增需求量',
                                data: [...valArr],
                                type: 'line',
                                areaStyle: {
                                    color: 'rgb(232, 243, 253)' //区域背景色
                                },
                                smooth: true
                            }
                        ]
                    };
                } else {
                    state.lineOption = {
                        legend: {
                            x: 'center',
                            y: 'bottom',
                            data: ['每日新增需求量']
                        },
                        xArr: [instance.proxy.$moment(props.form.startTime).format('YYYY-MM-DD'), instance.proxy.$moment(props.form.endTime).format('YYYY-MM-DD')],
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                name: '每日新增需求量',
                                data: [0, 0],
                                type: 'line',
                                areaStyle: {
                                    color: 'rgb(232, 243, 253)' //区域背景色
                                },
                                smooth: true
                            }
                        ]
                    };
                }
            });
        };
        watch(
            () => props.detail,
            () => {
                initData();
            },
            {
                deep: true,
                immediate: true
            }
        );
        initData();
        return {
            ...toRefs(state),
            handleShowTipModal
        };
    }
});
</script>

<style scoped lang="less">
.card {
    min-height: 372px;
    overflow: hidden;
    position: relative;
    background-color: #fff;
    border-radius: 4px;
    cursor: pointer;
    &-header {
        height: 52px;
        background-color: #f8fbff;
    }
    &-cont {
        padding: 24px;
    }

    .board-cont {
        .left {
            width: 422px;
            height: 242px;
            background: url('~@/assets/images/chart/boardBg.png');
            background-size: 100% 100%;
            margin-bottom: 12px;
            color: #fff;
            padding: 32px 24px;
            box-sizing: border-box;
        }
        .right {
            flex: 1;
            .item {
                height: 115px;
                margin-left: 12px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                padding-left: 24px;
                box-sizing: border-box;
                background: #f5f5f5;
                border-radius: 4px;
                margin-bottom: 12px;
                position: relative;
                img {
                    width: 30px;
                }
                .trangle {
                    position: absolute;
                    z-index: 1;
                    top: 0;
                    right: 0;
                    width: 0px;
                    height: 0px;
                    border-top: 30px solid #f7762a;
                    border-left: 35px solid transparent;
                }
                .warning-img {
                    width: 6px;
                    position: absolute;
                    top: 5px;
                    right: 5px;
                    z-index: 2;
                }
            }
        }
    }
}
.card:first-child {
    margin-left: 0 !important;
    margin-top: 0 !important;
}
</style>